<template>
    <div class="toSignUpLess">
        <div class="toSignUp-box">
            <span class="t-a-l span-bm">报考信息</span>
            <div>
                <el-form label-position="right" label-width="180px" :model="formLabelAlign">
                    <el-row :gutter="20">
                        <el-col :span="16" :offset="1">
                            <div class="grid-content bg-purple">
                                <el-form-item label="考试科目：">
                                    <el-radio-group v-model="formLabelAlign.subjectsId">
                                        <el-radio v-for="(item,index) in subList" :key="index" :label="item.id" @change="leList(item.id)">{{item.chName}}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div>
                            <div class="grid-content bg-purple" v-show="levList.length > 0">
                                <el-form-item label="考试等级：">
                                    <el-radio-group v-model="formLabelAlign.subjectsLevelId">
                                        <el-radio v-for="(item,index) in levList" :key="index" :label="item.id">{{item.name}}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div>
                            <div class="grid-content bg-purple">
                                <div class="grid-content-yiban">
                                    <el-form-item label="姓拼音：">
                                        <el-input v-model="formLabelAlign.pinyinFamilyName" @input="xing(1,$event)"></el-input>
                                    </el-form-item>
                                </div>
                                <div class="grid-content-yiban">
                                    <el-form-item label="中文名：">
                                        <el-input v-model="formLabelAlign.chName" @input="xing(4,$event)"></el-input>
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="grid-content bg-purple">
                                <div class="grid-content-yiban">
                                    <el-form-item label="名拼音：">
                                        <el-input v-model="formLabelAlign.pinyinName" @input="xing(2,$event)"></el-input>
                                    </el-form-item>
                                </div>
                                <div class="grid-content-yiban">
                                    <el-form-item label="培训机构：">
                                        <el-select v-model="formLabelAlign.organizationId" placeholder="请选择">
                                            <el-option
                                            v-for="item in options"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="grid-content bg-purple">
                                <div class="grid-content-yiban">
                                    <el-form-item label="英文名：">
                                        <el-input v-model="formLabelAlign.enName" @input="xing(3,$event)"></el-input>
                                    </el-form-item>
                                </div>
                                <div class="grid-content-yiban" style="margin-top:1px;">
                                    <el-form-item label="GPC编号：">
                                        {{info.gpcCode}}
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="grid-content bg-purple">
                                <div class="grid-content-yiban">
                                    <el-form-item label="是否GPC会员：">
                                        {{info.gpcUser == 1 ? '是' : '否'}}
                                    </el-form-item>
                                </div>
                                <div class="grid-content-yiban">
                                    <el-form-item label="GPC会员名：">
                                        {{info.gpcName}}
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="grid-content bg-purple">
                                <div class="grid-content-yiban">
                                    <el-form-item label="GPC会员等级：">
                                        {{info.vipLevel | vipLevel}}
                                    </el-form-item>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <el-button class="go-pay" @click="goPay()">立即提交</el-button>
    </div>
</template>
<script>
import apiHttp from '../../../api/index.js'
export default {
    data(){
        return{
            radio:'1',
            formLabelAlign:{
                userId:'',
            },
            info:{},
            subList:[],
            levList:[],
            options:[]
        }
    },
    filters:{
        vipLevel(val){
            if(val == 0){
                return '普通会员'
            }else if(val == 1){
                return '一年会员' 
            }else{
                return '终生会员'
            }
        }
    },
    mounted(){
        this.sList()
        this.oList()
        this.infos()
    },
    methods:{
        xing(type,e){
            if(type == 1){
                this.formLabelAlign.pinyinFamilyName = e.replace(/[^a-zA-Z]/g, '')
            }else if(type == 2){
                this.formLabelAlign.pinyinName = e.replace(/[^a-zA-Z]/g, '')
            }else if(type == 3){
                this.formLabelAlign.enName = e.replace(/[^a-zA-Z]/g, '')
            }else{
                this.formLabelAlign.chName = e.replace(/[^\u4E00-\u9FA5]/g, '')
            }
            
        },
        // 获取个人信息
        infos(){
            apiHttp.apiIndex.examDetail('').then(resp=>{
                if(resp.code == 0){
                    this.info = resp.data
                    this.formLabelAlign.userId = this.info.id
                }
            })
        },
        // 科目列表
        sList(){
            apiHttp.apiIndex.subjectsList('').then(resp=>{
                if(resp.code == 0){
                    this.subList = resp.data
                }
            })
        },
        // 科目等级列表
        leList(id){
            let parmes = {
                subjectsId: id
            }
            apiHttp.apiIndex.subjectsLevelList(parmes).then(resp=>{
                if(resp.code == 0){
                    this.levList = resp.data
                }
            })
        },
        // 培训机构
        oList(){
            apiHttp.apiIndex.organizationList('').then(resp=>{
                if(resp.code == 0){
                    this.options = resp.data
                }
            })
        },
        goPay(){
            this.formLabelAlign.examinationId = this.$route.query.ksId
            if(this.formLabelAlign.pinyinFamilyName == '' || this.formLabelAlign.pinyinFamilyName == null){
                this.validation('姓拼音不能为空')
                return
            }else if(this.formLabelAlign.pinyinName == '' || this.formLabelAlign.pinyinName == null){
                this.validation('名拼音不能为空')
                return
            }else if(this.formLabelAlign.enName == '' || this.formLabelAlign.enName == null){
                this.validation('英文名不能为空')
                return
            }else if(this.formLabelAlign.chName == '' || this.formLabelAlign.chName == null){
                this.validation('中文名不能为空')
                return
            }else if(this.formLabelAlign.organizationId == '' || this.formLabelAlign.organizationId == null){
                this.validation('请选择培新机构')
                return
            }
            apiHttp.apiIndex.applySubmit(this.formLabelAlign).then(resp=>{
                if(resp.code == 0){
                    this.$message({
                        type: 'success',
                        message: '提交成功!'
                    })
                    this.$router.push({
                        path:'/students/myTest'
                    })
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.message
                    })
                }
            })
        },
        // 验证必填项
        validation(message){
            this.$message({
                message: message,
                type: 'warning'
            });
        },
    }
}
</script>

<style lang="less">
.toSignUpLess{
    .toSignUp-box{
        border: solid 1px #bfbfbf;
        border-radius: 5px;
        padding: 20px;
        .span-bm{
            font-size: 18px;
            font-weight: bold;
            color: #5d2805;
            display: block;
        }
        .grid-content{
            text-align: left;
            height: 50px;
            line-height: 50px;
            .grid-content-yiban{
                width: 50%;
                float: left;
                .el-input{
                    width: 70%;
                }
            }
            .el-radio__input.is-checked .el-radio__inner{
                background: #5d2805;
                border-color: #5d2805;
            }
            .el-radio__input.is-checked+.el-radio__label{
                color: #5d2805;
            }
        }
    }
    .go-pay{
        margin-top: 30px;
        background-color: #5d2805;
        color: #fff;
        border-color: #5d2805;
        cursor: pointer;
        font-size: 16px;
    }
}
</style>

